<template>
  <div>
    <el-table :data="list" stripe style="width: 100%">
      <el-table-column prop="id" label="订单id"></el-table-column>
      <el-table-column prop="storeName" label="商家名称"></el-table-column>
      <el-table-column prop="masterName" label="负责人姓名"> </el-table-column>
      <el-table-column prop="masterPhone" label="负责人电话"> </el-table-column>
      <el-table-column prop="status" label="订单状态">
        <template #default="props">
          <el-tag v-if="props.row.status == 0" type=""> 未支付 </el-tag>
          <el-tag v-if="props.row.status == 4" type="success"> 已安排 </el-tag>
          <el-tag v-if="props.row.status == 6" type="danger"> 已退款 </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="订单价格"> </el-table-column>
      <el-table-column prop="carCount" label="检测车辆数"> </el-table-column>
      <el-table-column prop="updateDate" label="下单时间"> </el-table-column>
      <el-table-column prop="serveName" label="商务负责人"> </el-table-column>
      <el-table-column label="操作">
        <template #default="props">
          <el-button type="primary" size="small" @click="getclick(props.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="pageNum"
      :page-size="10"
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="50%"
      center=""
    >
      <el-descriptions :border="true">
        <el-descriptions-item label="订单id">{{
          newObj.id
        }}</el-descriptions-item>
        <el-descriptions-item label="负责人姓名">{{
          newObj.masterName
        }}</el-descriptions-item>
        <el-descriptions-item label="负责人电话">{{
          newObj.masterPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag v-if="newObj.status == 0">未支付</el-tag>
          <el-tag type="success" v-if="newObj.status == 4">已安排</el-tag>
          <el-tag type="danger" v-if="newObj.status == 6">已退款</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="订单价格">{{
          newObj.price
        }}</el-descriptions-item>
        <el-descriptions-item label="检测车辆数">{{
          newObj.carCount
        }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{
          newObj.createDate
        }}</el-descriptions-item>
        <el-descriptions-item label="车辆详情">
          <div v-for="(car, index) in newObj.cars" :key="index">
            {{ car.carNumber }}
            <el-image
              v-for="(item, index) in car.licenseImg"
              :key="index"
              :src="item"
              style="width: 100px"
              fit="scale-down"
              lazy
              :preview-src-list="car.licenseImg"
            ></el-image>
            <el-image
              v-for="(item, index) in car.policyImg"
              :key="index"
              :src="item"
              style="width: 100px"
              fit="scale-down"
              lazy
              :preview-src-list="car.policyImg"
            ></el-image>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <el-button
        size="mini"
        type="danger"
        v-if="newObj.status > 0 && newObj.status < 6"
        @click="tuikuan(newObj)"
        >退款</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      list: [],
      total: 0,
      pageNum: 1,
      dialogVisible: false,
      newObj: {},
    };
  },
  mounted: function () {
    this.initOrder(1);
  },
  methods: {
    initOrder: function (val) {
      this.$http
        .get("/order/getOrder?" + `pageNum=${val}&pageSize=10`)
        .then((res) => {
          // console.log(res.data.object.list);
          this.list = res.data.object.list;
          this.total = res.data.object.total;
        });
    },
    handleCurrentChange: function (pageNum) {
      //  console.log(pageNum);
      this.pageNum = pageNum;
      this.initOrder(pageNum);
    },
    getclick: async function (obj) {
      this.newObj = obj;
      const { data } = await this.$http.get(
        `/order/getCarsByOrderId?merchantOrderId=${obj.id}`
      );
      this.newObj.cars = data.object;
      this.dialogVisible = true;
    },
    tuikuan: async function (obj) {
      let carIds = obj.orderIds.split(",").filter((item) => {
        if (item) {
          return item;
        }
      });
      this.$confirm("此操作将退还费用给客户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data } = await this.$http.post(`/order/verifyRefund`, {
            verifyResult: 1,
            carIds,
            merchantOrderId: obj.id,
            quote: obj.price,
            reason: "协商一致,后台退款",
            applyUserName: this.currentUser.username,
            applyUserPhone: this.currentUser.phone,
          });
          if (data.code == 1) {
            this.$message.success("退款成功");
            this.reload();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退款",
          });
        });
    },
  },
};
</script>

<style></style>
